<template>
  <div class="mod-accessories__kxaccessories">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-date-picker style="width: 100%" v-model="pictureDate" value-format="YYYY-MM-DD HH:mm:ss"
                        type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" unlink-panels :shortcuts="shortcuts"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="exportHandle()">{{ $t("export") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
              style="width: 100%" :height="tableHeight" :row-class-name="tableRowClassName">
      <el-table-column prop="cmdId" label="监测装置编码" header-align="center" align="center"></el-table-column>
      <el-table-column prop="timeStamp" label="采集时间" header-align="center" align="center"></el-table-column>
      <el-table-column prop="averageWindSpeed10min" label="平均风速" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.averageWindSpeed10min }}</span>m/s
        </template>
      </el-table-column>
      <el-table-column prop="averageWindDirection10min" label="平均风向" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.averageWindDirection10min }}</span>°
        </template>
      </el-table-column>
      <el-table-column prop="maxWindSpeed" label="最大风速" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.maxWindSpeed }}</span>m/s
        </template>
      </el-table-column>
<!--      <el-table-column prop="extremeWindSpeed" label="极大风速" header-align="center" align="center">-->
<!--        <template #default="scope">-->
<!--          <span style="margin-left: 10px">{{ scope.row.extremeWindSpeed }}</span>m/s-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="standardWindSpeed" label="标准风速" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.standardWindSpeed }}</span>m/s
        </template>
      </el-table-column>
      <el-table-column prop="airTemperature" label="气温" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.airTemperature }}</span>℃
        </template>
      </el-table-column>
      <el-table-column prop="humidity" label="湿度" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.humidity }}</span>%RH
        </template>
      </el-table-column>
      <el-table-column prop="airPressure" label="气压" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.airPressure }}</span>hPa
        </template>
      </el-table-column>
      <el-table-column prop="precipitation" label="降雨量" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.precipitation }}</span>mm
        </template>
      </el-table-column>
      <el-table-column prop="precipitationIntensity" label="雨强" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.precipitationIntensity }}</span>mm/min
        </template>
      </el-table-column>
      <el-table-column prop="radiationIntensity" label="光辐射强度" header-align="center" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.radiationIntensity }}</span>W/㎡
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                   layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                   @current-change="pageCurrentChangeHandle"></el-pagination>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import {tableRowClassName} from "@/utils/tableRowClassName";
import shortcuts from "@/utils/timeHorizon";

export default defineComponent({
  props: {
    stationId: {
      type: String,
    },
    cmdId: {
      type: String,
    },
    porppictureDate: {
      type: Array,
      default: []
    }
  },
  setup() {
    const state = reactive({
      shortcuts,
      tableRowClassName,
      getDataListURL: "/KxMeteorology/kxmeteorology/page",
      getDataListIsPage: true,
      exportURL: "/KxMeteorology/kxmeteorology/export",
      // deleteURL: "/accessories/kxaccessories",
      deleteIsBatch: true,
      pictureDate: [] as any,
      dataForm: {
        stationId: "",
        cmdId: "",
        startTime: "",
        endTime: ""
      } as any,
      visible: false,
      id: "",
      tableHeight: 0,
      dataList: []
    });
    return {...useView(state), ...toRefs(state)};
  },
  created() {
    this.dataForm.stationId = this.stationId;
    this.dataForm.cmdId = this.cmdId;
    this.pictureDate = this.porppictureDate;
  },
  mounted() {
    this.tableHeight = window.innerHeight - 400;
  },
  watch: {
    pictureDate: {
      handler(val) {
        if (val === null) {
          this.dataForm.startTime = "";
          this.dataForm.endTime = "";
        } else {
          this.dataForm.startTime = val[0];
          this.dataForm.endTime = val[1];
        }
      },
      deep: true
    }
  },
  methods: {
    amendHandle(id: string) {
      this.id = id;
      this.visible = true;
    },
    addList() {
      this.id = "";
      this.visible = true;
    }
  }
});
</script>
